<div class="wrapper-bz-page">
    <style>
        .title-word-speech-type{background: black;
            color: white;
            padding: 5px 10px;}
        .zone-word-explanation{background:#eee; padding: 10px;  margin:5px;}
        .zone-word-phrase{background:#eee; padding: 10px; margin:20px 5px;}
        .title-zone{
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            padding-bottom: 10px;

        }
        .title-zone-explanation{color: green;border-bottom: 2px solid green;}
        .title-zone-phrase{color: orange;border-bottom: 2px solid orange;}
        .box-word-meaning-item{padding-left: 20px;}
        .title-word-meaning{padding: 3px 10px 0px 10px;margin-top: 5px;}
        .title-word-meaning .label-meaning{background: #85af42;padding: 1px 10px;margin-right: 5px;}
        .title-word-phrase{padding: 3px 10px 0px 10px;margin-top: 5px;}
        .title-word-phrase .label-phrase{background: #e1b35f;padding: 1px 10px; margin-right: 5px;}
        .title-word-phrase .text-phrase{font-weight: bold; margin-right:10px;}
        .box-sentence-item{margin-bottom: 10px;}
        .box-sentence-item{display: flex;flex-direction: row;}
        .title-word-sentence{width:80px; font-weight: bold;}
        .zone-word-explanation .title-word-sentence{color:green;}
        .zone-word-phrase .title-word-sentence{color:#bf8111;}
        .content-word-detail{background: silver;}
        .box-word-phrase-list{padding: 0px 20px;}
        .text-meaning-en{margin-left: 80px;font-size: 12px;color: #333;}
    </style>
    <div class="wrapper-bz-body" >
        <div class="column-block block-left" style="width:400px;">
            <div class="column-title">单词</div>
            <div class="column-content">
                <div class="column-filter">
                    <div class="common-search-box">
                        <input style="width:250px"  id="search_input_lib_word_en_m58" />
                    </div>
                </div>
                <div class="column-datagrid">
                    <table id="table_lib_word_en_m58" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:410px;">
            <div class="column-title">单词详情</div>
            <div class="column-content content-word-detail" id="content_word_detail">
<!--                <div class="zone-word-explanation">-->
<!--                    <div class="title-zone title-zone-explanation">单词释义</div>-->
<!--                    <div class="box-word-speech-type-item">-->
<!--                        <div class="title-word-speech-type"><span>词性：</span><span>n</span></div>-->
<!--                        <ul class="box-word-meaning-list">-->
<!--                            <li class="box-word-meaning-item">-->
<!--                                <div class="title-word-meaning">退回、仅供</div>-->
<!--                               <div class="box-sentence-item">-->
<!--                                   <div class="title-word-sentence">例句1</div>-->
<!--                                   <div class="content-word-sentence">-->
<!--                                       <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                       <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                   </div>-->
<!--                               </div>-->

<!--                                <div class="box-sentence-item">-->
<!--                                    <div class="title-word-sentence">例句2</div>-->
<!--                                    <div class="content-word-sentence">-->
<!--                                        <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                        <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="box-word-meaning-item">-->
<!--                                <div class="title-word-meaning">采访、杜绝</div>-->
<!--                                <div class="box-sentence-item">-->
<!--                                    <div class="title-word-sentence">例句3</div>-->
<!--                                    <div class="content-word-sentence">-->
<!--                                        <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                        <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                    </div>-->
<!--                                </div>-->

<!--                                <div class="box-sentence-item">-->
<!--                                    <div class="title-word-sentence">例句3</div>-->
<!--                                    <div class="content-word-sentence">-->
<!--                                        <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                        <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="box-word-meaning-item">-->
<!--                                <div class="title-word-meaning">沙口路咖喱</div>-->
<!--                                <div class="box-sentence-item">-->
<!--                                    <div class="title-word-sentence">例句3</div>-->
<!--                                    <div class="content-word-sentence">-->
<!--                                        <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                        <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                    </div>-->
<!--                                </div>-->

<!--                                <div class="box-sentence-item">-->
<!--                                    <div class="title-word-sentence">例句3</div>-->
<!--                                    <div class="content-word-sentence">-->
<!--                                        <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                        <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="zone-word-phrase">-->
<!--                    <div class="title-zone title-zone-phrase">相关词组</div>-->
<!--                    <ul class="box-word-phrase-list">-->
<!--                        <li>-->
<!--                            <div class="title-word-phrase">Phrase 1:</div>-->
<!--                            <div class="box-sentence-item">-->
<!--                                <div class="title-word-sentence">例句2</div>-->
<!--                                <div class="content-word-sentence">-->
<!--                                    <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                    <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <div class="title-word-phrase">Phrase 2:</div>-->
<!--                            <div class="box-sentence-item">-->
<!--                                <div class="title-word-sentence">例句2</div>-->
<!--                                <div class="content-word-sentence">-->
<!--                                    <div><span>英文:</span><span>You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.You will nerver give up, I knew it.If you do it, I would never forgive you. call me daddy, don't confuse me.</span></div>-->
<!--                                    <div><span>英文:</span><span>我知道你永远不会放弃的</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
        </div>
    </div>
</div>
<div id="dialog_add_lib_word_en"></div>
<div id="dialog_edit_lib_word_en"></div>

<script>
    $(function(){
        var subject = "lib_word_en_m58";
        var tableId = "table_" + subject;
        var searchInputId = "search_input_" + subject;
        var tableObject = $("#" + tableId);
        var addDialogId = '#dialog_add_' + subject;


        // var searchOption = {
        //     activity_id: {
        //         width: 300,
        //         data: dataActivityOption,
        //         textField:'title',
        //         valueField:'id',
        //         multiple:false
        //     },
        //     activity_group_id:{
        //         data: [],
        //         textField:'level_text',
        //         valueField:'id',
        //         multiple:false
        //     }
        // };
        // searchOption.activity_id.onLoadSuccess = function(){
        //     $("#ele_select_activity_id_in_" + subject).combobox('select', dataActivityOption[0].id);
        // };
        // searchOption.activity_group_id.onLoadSuccess = function(){
        //     console.log(dataActivityGroupOption);
        //     if(dataActivityGroupOption.length > 0){
        //         $("#ele_select_activity_group_id_in_" + subject).combobox('select', dataActivityGroupOption[0].id);
        //     }
        // };
        // searchOption.activity_id.onChange = function(){
        //     var activityId =  $("#ele_select_activity_id_in_" + subject).combobox('getValue');
        //     dataActivityGroupOption = getActivityGroupOption(activityId);
        //     searchOption.activity_group_id.data = dataActivityGroupOption;
        //     $("#ele_select_activity_group_id_in_" + subject).combobox(searchOption.activity_group_id);
        // };
        //
        // searchOption.activity_group_id.onChange = function(){
        //     var activityGroupId =  $("#ele_select_activity_group_id_in_" + subject).combobox('getValue');
        //     var nowDate = new Date();
        //     var nowFormatDate = nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate();
        //     dataActivityPlanByMonth = getActivityPlanByMonth(activityGroupId, nowFormatDate);
        //     tableObject.calendar(calendarConfig);
        // };
        var configDialogAdd = {
            href:'admin/clockin_activity_plan/add',
            title:'活动计划诗词安排',
            queryParams:{},
            width:'60%',
            height:450,
            modal:true,
            buttons:[]
        };
        var configDatagrid = {
            url:'/api/LibWordEn/getLibWordEnList',
            method: 'post',
            remoteSort:false,
            pageList:[20,50,100],
            pageSize:20,
            pagination:true,
            queryParams: {status:1},
            clickToEdit:false,
            dblclickToEdit:true,
            singleSelect:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            fit:true,
            frozenColumns:[[
            ]],
            columns:[[
                {field:'id',title:'ID',width:40,hidden:true},
                {field:'spelling',title:'单词',width:300},
                {field:'pronounciation',title:'音标',width:60},
                {field:'status',title:'状态',width:100}
            ]],
            loadFilter: function(data){
                return loadFilter(data, true);
            },
            onClickRow: function(index, row){
                var detailData = getWordDetail(row.id);
                var htmlContent = makeDetailContentHtml(detailData);
                $("#content_word_detail").html(htmlContent);
            },
            toolbar:[
                {
                    text:'<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    id:'btn_refresh_in_page_toolbar',
                    plain:true,
                    handler:function(){
                        tableObject_3.datagrid('reload');
                    }
                }
            ]
        };
        // searchOption.activity_id.onChange = function(){
        //     var activityId =  $("#ele_select_activity_id_in_" + subject).combobox('getValue');
        //     dataActivityGroupOption = getActivityGroupOption(activityId);
        //     searchOption.activity_group_id.data = dataActivityGroupOption;
        //     $("#ele_select_activity_group_id_in_" + subject).combobox(searchOption.activity_group_id);
        //     configDatagridA.queryParams['activity_id'] = activityId;
        //     tableObjectA.datagrid(configDatagridA);
        //
        //     var activityDayList = getActivityAllDayList(activityId, 0);
        //     var htmlContent = assembleHtmlForActivityDuration(activityDayList);
        //     $("#table_activity_day_in_poem_activity_plan_list").html(htmlContent);
        // };


        tableObject.datagrid(configDatagrid);
        // var searchFieldSelect = ['year', 'month'];
        // initComboboxOption(subject, searchFieldSelect);
        SearchCombobox(searchInputId, tableId,function (val,name) {
            configDatagrid.queryParams[name] = val;
            tableObject.datagrid(configDatagrid);
        },['CK','ID', '状态']);

        function initSearchOption(searchOption)
        {
            $("#ele_select_activity_id_in_"+subject).combobox(searchOption.activity_id);
            $("#ele_select_activity_group_id_in_"+subject).combobox(searchOption.activity_group_id);
        }

        function getWordDetail(wordId)
        {
            var optionData;
            $.ajax({
                url: '/api/LibWordEn/getWordDetail',
                async: false,
                type:'post',
                data:{id:wordId},
                success:function(resp){
                    if( 1 == resp.code ){
                        optionData = resp.data;
                    }
                }
            });
            return optionData;
        }

        function makeDetailContentHtml(detailData)
        {
            var html = '';
            //释义部分
            html += '<div class="zone-word-explanation">';
            html += '<div class="title-zone title-zone-explanation">单词释义</div>';
            $.each(detailData.word_explanation, function(index1, speechTypeItem){
                html += '<div class="box-word-speech-type-item">';
                html += '<div class="title-word-speech-type"><span>词性：</span><span>' + speechTypeItem.speech_text + '</span></div>';
                if(speechTypeItem.meaning_list.length > 0){
                    html += '<ul class="box-word-meaning-list">';
                    $.each(speechTypeItem.meaning_list, function(index2, wordMeaningItem){
                        html += '<li class="box-word-meaning-item">';
                        html += '<div class="title-word-meaning"><span class="label-meaning">释义 ' + (index2+1) + '</span>' + wordMeaningItem.meaning_cn + '</div>';
                        html += '<div class="text-meaning-en"><em>EN:</em>' + wordMeaningItem.meaning_en + '</div>';
                        if(wordMeaningItem.sentence_list.length > 0){
                            html += '<div class="box-sentence-item">';
                                $.each(wordMeaningItem.sentence_list, function(index3, wordSentenceItem){
                                    html += '<div class="title-word-sentence">例句' + (index3+1) + '</div>';
                                    html += '<div class="content-word-sentence">';
                                    html += '<div class="language-en">' + wordSentenceItem.sentence_en + '</div>';
                                    html += '<div class="language-cn">' + wordSentenceItem.sentence_cn + '</div>';
                                    html += '</div>'
                                });
                            html += '</div>';
                        }
                        html += '</li>';
                    });
                    html += '</ul>';
                }
                html += '</div>';
            });
            html += '</div>';

            //词组部分
            html += '<div class="zone-word-phrase">';
            html += '<div class="title-zone title-zone-phrase">相关词组</div>';
            if(detailData.word_phrase.length > 0){
                html += '<ul class="box-word-phrase-list">';
                $.each(detailData.word_phrase, function(index4, wordPhraseItem){
                    html += '<li>';
                        html += '<div class="title-word-phrase"><span class="label-phrase">词组 ' + (index4+1) + '</span><span class="text-phrase">' + wordPhraseItem.phrase + '</span><span class="text-phrase-meaning-cn">' + wordPhraseItem.meaning_cn + '</span></div>';
                        html += '<div class="text-meaning-en"><em>EN:</em>' + wordPhraseItem.meaning_en + '</div>';
                        if(wordPhraseItem.sentence_list.length > 0){
                            $.each(wordPhraseItem.sentence_list, function(index5, phraseSentenceItem){
                                html += '<div class="box-sentence-item">';
                                html += '<div class="title-word-sentence">例句' + (index5+1) + '</div>';
                                html += '<div class="content-word-sentence">';
                                html += '<div class="language-en">' + wordSentenceItem.sentence_en + '</div>';
                                html += '<div class="language-cn">' + wordSentenceItem.sentence_cn + '</div>';
                                html += '</div>';
                                html += '</div>';
                            });
                        }

                    html += '</li>';
                });
                html += '</ul>';
            }
            html += '</div>';

            return html;
        }
    });
</script>